<template>
	<div class="margin-top">
		<Header/>
		<div class="details">
			<div class="title">{{ details.name }}</div>
			<div class="date">{{ details.date }}</div>
			<div class="content" v-html="details.details"></div>
		</div>
		<Footer />
	</div>
</template>

<script>
	import Header from '@/components/Header'
	import Footer from '@/components/Footer'
	export default {
		name: 'detailsPage',
		components: {
			Header,
			Footer
		},
		data() {
			return {
				details: JSON.parse(localStorage.getItem('details'))
			}
		},
		beforeCreate(){
			document.body.scrollTop = 0
			document.documentElement.scrollTop = 0;
		},
		created() {
			console.log(this.details)
		}
	}
</script>

<style scoped lang="less">
	.details {
		width: 1200px;
		margin: 0 auto;
		min-height:45vh;
		padding:40px 0;
		img{
			width:100%;
			max-width:100%;
		}
		.title {
			text-align: center;
			font-size: 18px;
			color: #333;
			font-weight: 600;
		}
		.date{
			margin-top: 20px;
			border-bottom:1px solid #eee;
			color:#999;
			text-align: center;
			padding-bottom: 20px;
			margin-bottom: 20px;
		}
	}
</style>
